<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项列表</title>
    <style>
        body{
            margin: 0;
            min-width: 250px;
        }
        .header{
            background: #f44336;
            padding:30px 40px;
            color: white;
            text-align: center;
        }
        input{
            border: none;
            width: 75%;
            padding: 10px;
            font-size: 16px;
        }
        .addBtn{
            padding: 10px;
            width: 25%;
            background: #d9d9d9;
            color: #555;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            transition: 0.3s;
            margin-left:-5px;
        }
        .addBtn:hover{
            background: #bbb;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        ul li{
            cursor: pointer;
            position: relative;
            padding: 12px 8px 12px 40px;
            background: #eee;
            font-size: 18px;
            transition: 0.2s;
        }
        ul li:nth-child(odd){
            background: #f9f9f9;
        }
        ul li:hover{
            background: #ddd;
        }
        ul li.checked{
            background: #888;
            color: #fff;
            text-decoration: line-through;
        }
        .close{
            position: absolute;
            right:0;
            top:0;
            padding:12px 16px;
        }
        .close:hover{
            background: #f44336;
            color: white;
        }
    </style>
</head>
<body>

<div id="myDiv" class="header">
    <h2 style="margin:5px">My To Do List</h2>
    <input type="text" id="myInput" placeholder="Titke..."/>
    <span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL">
    <li>Hit the gym</li>
    <li class="checked">Pay bills</li>
    <li>Meet George</li>
    <li>Buy eggs</li>
    <li>Read a book</li>
    <li>Organize office</li>
</ul>

<script>

    var myNodeList = document.getElementsByTagName('li');
    var i;
    for(i = 0; i < myNodeList.length; i++){
      var span = document.createElement('span');
      var txt = document.createTextNode('\u00D7');
      span.className = 'close';
      span.appendChild(txt);
      myNodeList[i].appendChild(span);
    }
    var close = document.getElementsByClassName('close');
    for(i = 0; i < close.length; i++){
      close[i].onclick = function () {
        var div = this.parentElement;
        div.style.display = 'none';
      };
      /*myNodeList[i].onclick = function () {
        this.classList.toggle('checked')
      }*/
    }
    var list = document.querySelector('ul');
    list.addEventListener('click',function (e) {
      e.target.classList.toggle('checked');
    });

    function newElement () {
      var li = document.createElement('li');
      var inputValue = document.getElementById('myInput').value;
      var t = document.createTextNode(inputValue);
      li.appendChild(t);
      if(inputValue == ''){
        alert('请输入待办事项')
      }else{
        document.getElementById('myUL').appendChild(li);
      }
      document.getElementById('myInput').value = '';
      var span = document.createElement('span');
      var txt = document.createTextNode('\u00D7');
      span.className = 'close';
      span.appendChild(txt);
      li.appendChild(span);
      span.onclick = function () {
        li.style.display = 'none'
      }
    }
</script>

</body>
</html>